<template>
    <div class="formazione">
        <!-- 头部图片 -->
        <div class="child-header f-cen">
            <img src="../assets/images/formazione/top-formazione.jpg" />
            <div class="mask"></div>
            <div class="box">
                <div class="header-title animate__animated animate__bounceInDown">
                    <div class="title1">Corsi e formazione</div>
                    <div class="title2">Quantum Vitae Academy</div>
                </div>
            </div>
        </div>
        <!-- 头部信息 -->
        <div class="header-info c">
            <div class="header-info-title">Alta formazione professionale Bio-T</div>
            <div
                class="header-info-text"
            >Bio-t Tecnologie per la Vita tiene molto alla formazione professionale dei medici e dei terapisti che utilizzano i propri dispositivi e per questa ragione garantisce sempre un affiancamento costante e scrupoloso nel periodo successivo all’acquisto dei dispositivi.</div>
            <img src="../assets/images/formazione/logoquantum.png" alt />
        </div>
        <div class="header-info-content f">
            <p>
                L’Ing. Andrea Gadducci, esperto in biomedica ed in metodiche quanto-biofisiche, con il team di ingegneri biomedici, seguirà e supporterà in prima persona i medici ed i terapeuti nelle prime terapie con i pazienti, offrendo loro spiegazioni dettagliate in merito alle modalità di utilizzo e alle potenzialità dei macchinari.
                Al termine di ciascun corso, ad ogni partecipante verrà dato un attestato di partecipazione che certificherà l’adesione a tutti i moduli previsti per i singoli corsi di formazione.
            </p>
            <p>In aggiunta, nel medio e lungo periodo, Bio-t si impegna a promuovere nuove iniziative formative e a seguire il terapista attraverso l’aggiornamento periodico e avanzato su metodiche e tecniche di trattamento, stimolanti sessioni di workgroup e di ricerca; il tutto attraverso un confronto tra medici specialisti e terapisti sulle metodiche e i protocolli adottati ed i risultati riscontrati. Tutti gli incontri saranno anche occasione di approfondimento di patologie specifiche grazie all’intervento di importanti relatori specializzati.</p>
        </div>

        <!-- 日历 -->
        <div class="calendar">
            <div class="calendar-title c">Calendario corsi base</div>
            <div
                class="calendar-title c"
                style="font-size: 20px;"
            >Prossimi corsi in programma - 1° semestre 2022</div>
            <div class="calendar-text c">
                I corsi si intendono della durata di una giornata, a scelta tra le date disponibili indicate. Per ulteriori informazioni vi invitiamo a contattare la segreteria all’indirizzo
                <b>segreteria@biot.it</b>
            </div>
            <div class="calendar-box f-bet">
                <div class="calendar-box-item c" v-for="(item, index) in calendarList" :key="index">
                    <div class="calendar-box-item-title">{{ item.month }}</div>
                    <p>
                        Giovedì 13
                        <span class="city">MILANO</span>
                    </p>
                    <p>
                        Giovedì 20
                        <span class="city">ROMA</span>
                    </p>
                </div>
            </div>
            <div class="calendar-btn f-cen">
                <div class="btn">PROGRAMMA COMPLETO</div>
                <div class="btn">ISCRIVITI ORA</div>
            </div>
        </div>
        <!-- 宫格图 -->
        <div class="main">
            <!-- 大标题 -->
            <div class="main-title c">I nostri corsi</div>
            <div class="main-box f-cen">
                <div class="main-box-content f-col">
                    <div class="f">
                        <div class="row f" v-for="(item1, index) in list" :key="index">
                            <div
                                class="item f-end"
                                :style="{ background: 'url( ' + item1.imgUrl + ')  no-repeat center' }"
                            >
                                <div class="item-left f-col">
                                    <div class="item-left-title">{{ item1.title }}</div>
                                    <div class="item-left-text">{{ item1.text }}</div>
                                    <a href="#/tecnoogie">
                                        <div class="btn c">SCHEDA PRODOTTO</div>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="f">
                        <div class="row f" v-for="(item2, index2) in list2" :key="index2">
                            <div
                                class="item f"
                                :style="{ background: 'url( ' + item2.imgUrl + ')  no-repeat center ' }"
                            >
                                <div class="item-left f-col">
                                    <div class="item-left-title">{{ item2.title }}</div>
                                    <div class="item-left-text">{{ item2.text }}</div>
                                    <a href="#/tecnoogie">
                                        <div class="btn c">SCHEDA PRODOTTO</div>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 证书荣誉 -->
        <div class="honor">
            <div class="honor-box f-cen">
                <div class="honor-box-item c">
                    <div class="honor-title">Attestato di partecipazione</div>
                    <div
                        class="honor-text"
                    >Bio-T Tecnologie per la Vita rilascerà ad ogni iscritto ai propri corsi un attestato di partecipazione che certificherà la frequenza a tutti i corsi.</div>
                    <div class="honor-btn">RICHIEDI INFORMAZIONI SUI CORSI</div>
                </div>
                <div class="img">
                    <img src="../assets/images/formazione/bg.png" alt />
                </div>
            </div>
        </div>
        <!-- 中间标题 -->
        <div class="middle f-cen">
            <div class="middle-text">Partecipa anche tu al prossimo corso</div>
            <a href="#">
                <div class="middle-btn">CONTATTACI ORA</div>
            </a>
        </div>
        <!-- 展示图片专栏 -->
        <div class="show f">
            <div class="show-item" v-for="(item, index) in showList.slice(0, 6)" :key="index">
                <img :src="item.imgUrl" />
            </div>
        </div>
        <div class="show f">
            <div class="show-item" v-for="(item, index) in showList.slice(6, 12)" :key="index">
                <img :src="item.imgUrl" />
            </div>
        </div>

        <!-- quantumvitae专栏 -->
        <div class="column-quantumvitae">
            <div class="column-quantumvitae-main f">
                <div class="block"></div>
                <div class="column-quantumvitae-item f-col">
                    <img src="../assets/images/home/logoquantum.png" alt />
                    <h1>
                        Piattaforma di formazione
                        <br />on line
                    </h1>
                    <div
                        class="column-quantumvitae-item-text"
                    >Sulla Quantum Vitae Academy potrai seguire i nostri corsi di formazione e aggiornamento comodamente dal tuo studio, dalla tua abitazione, direttamente on line negli orari a te più comodi. Iscriviti ora e ricevi subito:</div>
                    <li>1 anno di accesso illimitato a tutti i contenuti e tutte le lezioni</li>
                    <li>tutte le registrazioni dei webinar</li>
                    <li>tutte le promo attive</li>
                    <a href="#" class="column-quantumvitae-btn">ACCEDI ORA</a>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
let calendarList = [{ month: 'GENNAIO' }, { month: 'FEBBRAIO' }, { month: 'MARZO' }, { month: 'APRILE' }, { month: 'MAGGIO' }, { month: 'GIUGNO' }, { month: 'LUGLIO' }]

let list = [{
    title: 'CIEM System',
    text: 'I corsi base sono rivolti a coloro che vogliono avvicinarsi ai dispositivi commercializzati da Bio-t, comprendendone le basi scientifiche ed i principi di funzionamento. In questo modo, medici e terapisti potranno valutare una possibile integrazione con le loro metodiche di lavoro e confrontarsi con i nostri Ingegneri Biomedici sulle tematiche verso di maggiore interesse.',
    imgUrl: 'src/assets/images/formazione/list1.jpg'

}, {
    title: 'Corsi avanzati',
    text: 'I corsi avanzati organizzati da Bio-t prevedono la partecipazione di professionisti esperti in qualità di relatori, consentendo un’ampia condivisione del know-how maturato da tali figure nell’ambito applicativo dei diversi dispositivi, unitamente alla possibilità di partecipazione a sessioni pratiche. ',
    imgUrl: 'src/assets/images/formazione/list2.jpg'

}]
let list2 = [{
    title: 'Corsi medicina quantistica sportiva',
    text: 'Il mondo della Medicina Quantistica ha fatto passi da gigante, introducendo nuove tecnologie di ultima generazione nel campo biomedicale. Al giorno d’oggi, avere a disposizione queste tecnologie e conoscenze è fondamentale per avere un vantaggio competitivo ed essere professionisti o centri medici d’avanguardia.',
    imgUrl: 'src/assets/images/formazione/list3.jpg'

}, {
    title: 'Corso Papimi per la terapia Enerpulse',
    text: 'I corsi  Papimi per la Terapia Enerpulse sono rivolti a medici, fisioterapisti, osteopati e terapeuti che vogliono valutare una possibile integrazione alle loro metodiche di lavoro e sopratutto confrontarsi con i nostri specialisti in merito alle tematiche di maggiore interesse.',
    imgUrl: 'src/assets/images/formazione/list4.jpg'

}]
let showList = [{
    imgUrl: 'src/assets/images/formazione/show1.jpg'
}, {
    imgUrl: 'src/assets/images/formazione/show2.jpg'
}, {
    imgUrl: 'src/assets/images/formazione/show3.jpg'
}, {
    imgUrl: 'src/assets/images/formazione/show4.jpg'
}, {
    imgUrl: 'src/assets/images/formazione/show5.jpg'
}, {
    imgUrl: 'src/assets/images/formazione/show6.jpg'
}, {
    imgUrl: 'src/assets/images/formazione/show7.jpg'
}, {
    imgUrl: 'src/assets/images/formazione/show8.jpg'
}, {
    imgUrl: 'src/assets/images/formazione/show9.jpg'
}, {
    imgUrl: 'src/assets/images/formazione/show10.jpg'
}, {
    imgUrl: 'src/assets/images/formazione/show11.jpg'
}, {
    imgUrl: 'src/assets/images/formazione/show12.jpg'
},]
</script>

<style lang="less" scoped>
.formazione {
    .header-info {
        max-width: 850px;
        margin: 80px auto 30px auto;
        &-title {
            color: @text-title;
            font-size: 45px;
            font-weight: 600;
        }
        &-text {
            color: @text-main;
            font-weight: 600;
            font-size: 14px;
            margin-bottom: 10px;
        }
    }
    .header-info-content {
        margin: 30px auto 80px auto;
        padding: 0 50px;
        max-width: @box-width+100;
        width: 100%;
        p {
            width: 100%;
            text-align: justify;
            padding: 15px;
            font-size: 14px;
            color: @text-main;
        }
    }
    .calendar {
        background-size: contain;
        background-position: top;
        background-image: url("../assets/images/formazione/fondo-molecole.jpg");
        &-title {
            color: @text-title;
            font-size: 34px;
            font-weight: 600;
            margin-top: 30px;
        }
        &-text {
            color: @text-main;
            font-size: 14px;
            max-width: @box-width+100;
            margin: 0 auto;
            padding: 0 50px;
        }
        &-box {
            max-width: @box-width+100;
            width: 100%;
            padding: 0 50px;
            margin: 40px auto;
            &-item {
                background: url("../assets/images/formazione/cale.png") center
                    no-repeat;
                background-size: contain;
                padding: 20px;
                width: 100%;
                &-title {
                    color: @text-title;
                    font-weight: 600;
                    margin: 10px;
                }
                p {
                    color: @text-title;
                    font-size: 12px;
                    .city {
                        display: block;
                        color: @text-w;
                    }
                }
            }
        }
        &-btn {
            .btn {
                margin: 50px;
                background-color: @bg2;
                font-size: 14px;
                color: @text;
                font-weight: 200;
                padding: 12px 22px;
                border-radius: 5px;
                cursor: pointer;
            }
        }
    }
    .main {
        &-title {
            color: @text-title;
            font-size: 32px;
            font-weight: 600;
            margin-top: 60px;
        }
        &-text {
            font-size: 14px;
            color: @text-main;
        }
        &-box {
            &-content {
                max-width: @box-width+100px;
                width: 100%;
                padding: 0 25px;
                .row {
                    width: 100%;
                    .item {
                        margin: 12px 15px;
                        width: 100%;
                        height: 350px;
                        background-size: cover !important;
                        &-left {
                            justify-content: center;
                            width: 50%;
                            background-color: rgba(255, 255, 255, 0.8);
                            padding: 20px;
                            &-title {
                                color: @text-title;
                                font-size: 20px;
                                font-weight: 600;
                            }
                            &-text {
                                font-size: 12px;
                                color: @text-main;
                                text-align: justify;
                            }
                        }
                        .btn {
                            color: @text;
                            background-color: @bg2;
                            font-size: 12px;
                            border-radius: 3px;
                            margin-top: 20px;
                            max-width: 160px;
                            cursor: pointer;
                            padding: 8px;
                        }
                    }
                }
            }
        }
    }
    .honor {
        margin-top: 60px;
        width: 100%;
        background: rgb(227, 234, 236);
        &-box {
            margin: 0 auto;
            max-width: @box-width+100;
            padding: 50px;
            &-item {
                width: 50%;
                padding: 0 25px;

                .honor-title {
                    font-weight: 600;
                    color: @text-title;
                    font-size: 34px;
                    margin-bottom: 20px;
                }
                .honor-text {
                    color: @text-main;
                    font-size: 14px;
                }
                .honor-btn {
                    border-radius: 5px;
                    color: @text;
                    padding: 12px 18px;
                    max-width: 300px;
                    font-size: 14px;
                    cursor: pointer;
                    background-color: @bg2;
                    margin: 10px auto;
                }
            }
        }
    }
    .middle {
        background-color: @bg1;
    }
    .show {
        &-item {
            flex: 1;
            overflow: hidden;
            img {
                transition: 0.5s;
                height: 100%;
                width: 100%;
                &:hover {
                    transform: scale(1.1);
                }
            }
        }
    }
}
</style>